import * as React from 'react';
import { observer } from 'mobx-react';
import { IBookListProps } from '../stores'
import { List, Rate } from 'antd';
import BookModel from '../models/BookModel'
import Modal from '../components/Modal'
import BookTag from './BookTag'

interface IProps extends IBookListProps {
  book: BookModel
}
@observer
export default class BookList extends React.Component<IProps> {
  public state = {
    visible: false,
    tagEditing: false
  };
  constructor(props: IProps) {
    super(props)
  }
  public editTag(book: BookModel) {
    this.setState({ tagEditing: true });
  }

  public saveTags = (tags: string) => {
    this.props.book.changeTag(tags)
    this.setState({ tagEditing: false });
  }
  public selectTag = (tag: string) => {
    this.props.bookStore.filter(tag)
  }
  public editBook(book: BookModel) {
    this.setState({ visible: true });
  }
  public handleCancel = () => {
    this.setState({ visible: false });
  }
  public rate = (value: number) => {
    this.props.book.rate(value)
  }
  public removeBook(book: BookModel) {
    book.destroy()
  }

  public render() {
    const book = this.props.book
    const title = book.url ? (<a href={book.url} target="_blank">{book.bookName}</a>) : book.bookName
    /* tslint:disable:jsx-key */
    return (
      <div>
        <List.Item actions={[
          <a onClick={this.editTag.bind(this, book)}>修改标签</a>,
          <a onClick={this.editBook.bind(this, book)}>编辑</a>,
          <a onClick={this.removeBook.bind(this, book)}>删除</a>]}>
          <List.Item.Meta
            title={<div>
              {title}
              <BookTag editing={this.state.tagEditing} tags={book.tags.slice()} onSave={this.saveTags} onClickItem={this.selectTag} />
            </div>}
            description={<Rate onChange={this.rate} value={book.star} />}
          />
        </List.Item>
        <Modal
          bookStore={this.props.bookStore}
          visible={this.state.visible}
          onCancel={this.handleCancel}
          book={book}
        />
      </div>
    );
  }
}
